<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态相册</title>
		<style type="text/css">
			body,html {
				margin: 0;
				padding: 0;
				font-size: 30px;
				font-family: '宋体';
			}
			.container {
				display: flex;
				width: 100%;
				height: 100vh;
			}
			.photo-display {
				flex: 1;
				background-color: #f0f0f0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15px;
				overflow: hidden;
			}
			.photo-display img {
				width: 500px;
				height: 300px;
				border-radius: 50%;
				object-fit: cover;
				transition: opacity 0.5s ease-in-out;
			}
			.album-categories {
				flex: 1;
				padding: 20px;
			}
			.search-box {
				display: flex;
				margin-bottom: 20px;
			}
			.search-box input {
				flex: 1;
				margin-right: 10px;
			}
			.categories {
				display: flex;
				flex-direction: column;
			}
			.category-row {
				display: flex;
				justify-content: space-between;
			}
			.category {
				flex: 1;
				margin: 5px;
				padding: 10px;
				color: red;
				cursor: pointer;
				transition: background-color 0.3s ease;
				text-align: center;
			}
			.category:hover {
				background-color: lightblue;
				border-radius: 50%;
			}
		</style>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<div class="photo-display">
				<img src="img/images/tu.jpg" id="display-image">
			</div>
			<div class="album-categories">
				<div class="search-box">
					<input type="text" id="search-input" placeholder="搜索图片...">
					<button onclick="searchPhotos()">搜索</button>
				</div>
				<div class="categories">
					<div class="category-row">
						<div class="category" data-category="中国国宝">中国国宝</div>
						<div class="category" data-category="兵马俑">兵马俑</div>
					</div>
					<div class="category-row">
						<div class="category" data-category="川菜">川菜</div>
						<div class="category" data-category="粤菜">粤菜</div>
					</div>
					<div class="category-row">
						<div class="category" data-category="新疆风情">新疆风情</div>
						<div class="category" data-category="客家土楼">客家土楼</div>
					</div>
					<div class="category-row">
						<div class="category" data-category="民族乐器">民族乐器</div>
						<div class="category" data-category="青铜重器">青铜重器</div>
					</div>
				</div>
			</div>
		</div>
		<script src="script.js"></script>
		<script type="text/javascript">
			document.querySelectorAll('.category').forEach(cat => {
			    cat.addEventListener('mouseenter', e => {
			        if (cat.dataset.intervalId) {
			            clearInterval(cat.dataset.intervalId);
			            cat.dataset.intervalId = null; 
			        }
			
			        const category = e.target.getAttribute('data-category');
			        document.getElementById('display-image').src = `img/images/${category}/1.jpg`;
			    });
			
			    cat.addEventListener('mouseleave', e => {
			        const category = e.target.getAttribute('data-category');
			        let count = 1;
			        const intervalId = setInterval(() => {
			            count = (count % 7) + 1; 
			            document.getElementById('display-image').src = `img/images/${category}/${count}.jpg`;
			        }, 3000);
			        cat.dataset.intervalId = intervalId;
			    });
			
			    cat.addEventListener('click', e => {
			        const category = encodeURIComponent(e.target.getAttribute('data-category'));
			        window.location.href = `https://image.baidu.com/search/index?tn=baiduimage&word=${category}`;
			    }); 
			});
			
			function searchPhotos() {
			    const query = encodeURIComponent(document.getElementById('search-input').value);
			    window.location.href = `https://image.baidu.com/search/index?tn=baiduimage&word=${query}`;
			}

		</script>
	</body>
</html>